<template>
  <div class="order">
    <van-nav-bar
      title="我的订单"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon
          name="search"
          size="18"
        />
      </template>
    </van-nav-bar>
    <div class="midd">
      <van-tabs v-model="activeName">
        <van-tab
          title="全部"
          name="a"
        >
          <div class="middle">
            <div class="middle-top">
              <div class="middle-top-left">
                <p class="middle-data">订单日期:{{ctime | filtime}}</p>
                <p style="color:#999999">订单编号:{{ctime}}</p>
              </div>
              <div class="middle-top-right">待付款</div>
            </div>
            <div class="middle-mid">
              <div class="middle-img"><img
                  src=""
                  alt=""
                ></div>
              <span class="midd-com">{{cname}}</span>
            </div>
            <div class="order-bottom">
              <span>共{{amount}}件商品 </span>
              <span>总金额: </span>
              <strong>{{price}}元</strong>
            </div>
            <div class="order-bottom-option">
              <div class="order-bottom-option-item">取消订单</div>
              <div class="order-bottom-option-item gopayment">立即付款</div>
            </div>
          </div>
        </van-tab>
        <van-tab
          title="代付款"
          name="b"
        >内容 2</van-tab>
        <van-tab
          title="代收款"
          name="c"
        >内容 3</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import Vue from 'vue'
Vue.filter('filtime', (arg, arg2 = 'YYYY-MM-DD HH:mm:ss') => {
  return moment(arg).format(arg2)
})
export default {
  data() {
    return {
      activeName: 'a',
      ctime: new Date().getTime(),
      cname: '小米8 屏幕指纹版',
      amount: '1',
      price: '9999'
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: '/me' })
    }
  }
}
</script>

<style  lang="less">
.order {
  background-color: #f5f5f5;
}
.van-nav-bar__content {
  background-color: #f5f5f5;
}
.van-tab__pane {
  padding: 0 0.32rem;
  font-size: 0.24rem;
  background-color: #fff;
  height: 100%;
  width: 100%;
}
.middle {
  height: 236px;
  width: 343px;
  margin: 0 auto;
  margin-top: 10px;
  .middle-mid {
    width: 333px;
    height: 60px;
    padding: 10px 5px 10px 5px;
    text-align: left;
    align-items: center;
    display: flex;
    .middle-img {
      width: 60px;
      height: 60px;
      margin-right: 8px;
      float: left;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .middle-com {
      float: left;
      display: block;
      overflow: hidden;
      font-size: 12.5px;
      color: #000;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .order-bottom {
    height: 21px;
    width: 343px;
    padding: 10px 0;
    text-align: right;
    border-top: 1px solid #ececec;
    color: #000;
    font-size: 12px;
    strong {
      font-weight: bold;
    }
  }
  .order-bottom-option {
    height: 33px;
    width: 343px;
    padding-bottom: 10px;
    text-align: right;
  }
  .order-bottom-option-item {
    display: inline-block;
    margin-right: 2px;
    height: 21px;
    padding: 5px 10px;
    border: 1px solid #999;
  }
  .gopayment {
    color: #ff5722;
    border: 1px solid #ff5722;
  }
}
.middle-top {
  height: 45px;
  padding: 15px 0 10px 0;
  background-color: #fff;
  border-bottom: 1px solid #ececec;
}
.middle-top-left {
  float: left;
  height: 45px;
  width: 250px;
}
.middle-data {
  margin-bottom: 3px;
  color: rgba(60, 60, 60, 0.87);
  height: 21px;
  font-size: 16px;
  margin-top: 0;
}
.middle-top-right {
  width: 53px;
  height: 45px;
  float: right;
  font-size: 17.5px;
  color: #ff5722;
}
</style>
